<template>
    <view class="">
		<view class="home">
			
		    <scroll-view scroll-x class="scrollNav">
				 <view class="item" :class="navIndex===index?'active':''" v-for="(item,index) in navData" @click="navClick(index,item.id)" :key=""item.id>
				 	{{item.classname}}
				 </view>
			</scroll-view>
			
			<view class="content">
				<view class="row" v-for="item in newsData" :key="item.id">
					<newsBox :item=item @click.native="goDetail(item)"></newsBox>
				</view>
			</view>
			
			<view class="nodata" v-if="!newsData.length">
				<image src="../../static/images/nodata.png" mode="widthFix"></image>
			</view>
			
			<view class="loading" v-if="loading && newsData.length">
				没有更多了..
			</view>
		</view>
 </view>
</template>

<script>
	export default {
		data() {
			return {
              navIndex:0,
			  navData:[],
			  newsData:[],
			  currentPage:1,
			  loading:false
			}
		},
		onLoad() {
              this.getNavData()
			  this.getNewsData()
		},
		onReachBottom(){
			this.currentPage++
			this.getNewsData()
		},
		methods: {
			onScrollToLower(){
				console.log('123');
				this.currentPage++
				this.getNewsData()
			},
        navClick(index,id){
		 this.navIndex=index,
		 this.currentPage=0
		 this.loading=false
		 this.newsData=[]
		 this.getNewsData(id)
		},
		goDetail(item){
			uni.navigateTo({
				url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
			})
		},
		getNavData(){
			uni.showLoading({
				title:'数据加载中',
				mask:true
			})
			uni.request({
				url:'https://ku.qingnian8.com/dataApi/news/navlist.php',
				success:(res)=>{
					if(res.statusCode==200){
						this.navData=res.data
					}else{
						uni.showToast({
							title:'数据异常',
							mask:true,
							icon:'error'
						})
					}
				},
				complete:()=>{
					uni.hideLoading()
				}
			})
		},
		getNewsData(id=50){
			uni.showLoading({
				title:'数据加载中',
				mask:true
			})
			uni.request({
				url:'https://ku.qingnian8.com/dataApi/news/newslist.php',
				data:{
					cid:id,
					page:this.currentPage
				},
				success: (res) => {
					if(res.statusCode==200){
						// console.log(res)
					   if(res.data.length==0){
						   this.loading=true
						   return
					   }
						this.newsData=[...this.newsData,...res.data]
						
					}else{
						uni.showToast({
							title:'数据异常',
							mask:true,
							icon:'error'
						})
					}
				},
				complete:()=>{
					uni.hideLoading()
				}
			})
		}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-box{
		::-webkit-scrollbar {
		 	 display: none;
		 	 width: 0;
		 	 height: 0;
		 	    }
	}
   .scrollNav{
	   height: 100rpx;
	   white-space: nowrap;
	   background-color: #F7F8FA;
	   position: fixed;
       top: var(window-top);
	   left: 0;
	   z-index: 5;
	  ::-webkit-scrollbar {
	   	 display: none;
	   	 width: 0;
	   	 height: 0;
	   	    }
	   .item{
		 display: inline-block;
		 font-size: 40rpx;
		 padding: 0 30rpx;
		 line-height: 100rpx;
		 color:#000002;
		 &.active{
			 color: #31C37C;
		 }
	   }
   }
   .content{
	   padding: 30rpx;
	   padding-top: 120rpx;
	   .row{
		   padding:15rpx 0rpx;
		   border-bottom: 1rpx dashed #efefef;
	   }
   }
   .nodata{
	   display: flex;
	   justify-content: center;
	   image{
		   width: 360rpx;
	   }
   }
   .loading{
   		   color:gray;
		   text-align:center;
		   padding-bottom: 20rpx;
   }
</style>
